<template>
    <div class="score">
        <header-title :city="city" :id="id">最终分数</header-title>
        <div class="score-box">
<h2>最终分数</h2>
        <h3>{{score}}</h3>
        <h4>{{level}}</h4>
        </div>
        
    </div>
</template>

<script>
import HeaderTitle from "../components/HeaderTitle.vue";

export default {
    name:'Score',
    components:{HeaderTitle},
    data() {
        return {
            score:0,
            level:''
        }
    },
   
    methods: {
        getScore() {
            this.score = this.$route.query.score
            this.$nextTick(() =>{
                if(this.score >= 90) {
                    this.level = '恭喜你及格了'


                }else {
                    this.level = '不及格，请多加练习!!!!'
                    document.querySelector("h4").style.color="red"
                }
            })
        }
     },
    created () {
        this.getScore()
    }

}
</script>

<style lang="scss" scoped>
.score {
    width: 100%;
    height: 2px;
    .score-box {
        width: 100%;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    line-height: 300%;

    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 34px;
    }
    h4 {
        font-size: 24px;
    }
}

</style>